<template>
  <footer class="activity-footer">
    <div class="description">
      <div class="description-item" v-for="(item, index) in descriptionList" :key="index">
        <img :src="item.img" alt="">
        <span>{{item.txt}}</span>
      </div>
      <div style="clear:both"></div>
    </div>
    <div class="logo">
      <div><img src="@/assets/images/activity/2018whiteday/logo.png" alt=""></div>
      <p>สิ่งในฝันอยากได้ไม่ต้องรอ</p>
    </div>
  </footer>
</template>
<script>
export default {
  data () {
    return {
      descriptionList: [
        { img: require('@/assets/images/activity/2018whiteday/icon_down_payments.png'), txt: 'ของแท้100%' },
        { img: require('@/assets/images/activity/2018whiteday/icon_stages.png'), txt: 'ผ่อนสบาย' },
        { img: require('@/assets/images/activity/2018whiteday/icon_logistics.png'), txt: 'รับของทันที' }
      ]
    }
  }
}
</script>

<style scoped>
.activity-footer {
  width: 100%;
  height: 327px;
}
.description {
  width: 861px;
  margin: 50px auto 0;
}
.description-item {
  float: left;
  margin-right: 129px;
}
.description-item:nth-child(3) {
  margin-right: 0;
}
.description-item img {
  margin-right: 20px;
}
.description-item span {
  font-family: SFNSDisplay;
  font-size: 26px;
  color: #FF7D2E;
  letter-spacing: 0;
}
.logo {
  margin-top: 109px;
  text-align: center;
}
.logo p {
  margin-top: 16px;
  font-size: 18px;
  color: #8F8F8F;
  letter-spacing: 0;
  line-height: 18px;
}
</style>
